<template>
  <div>
   <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="患者姓名：">
    <el-input v-model="formInline.name" placeholder="请输入姓名" class="formwidth"></el-input>
  </el-form-item>
  <el-form-item label="性别：">
    <el-select v-model="formInline.sex" placeholder="男" class="formwidthtwo">
      <el-option label="男" value="shanghai"></el-option>
      <el-option label="女" value="beijing"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="年龄：">
    <el-input v-model="formInline.age" placeholder="请输入年龄" class="formwidth"></el-input>
  </el-form-item>
    <el-form-item label="科别：">
    <el-select v-model="formInline.kebie" placeholder="外科" class="formwidth">
      <el-option label="外科" value="waike"></el-option>
      <el-option label="内科" value="neike"></el-option>
      <el-option label="妇科" value="fuke"></el-option>
      <el-option label="神经科" value="shenjingke"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="诊断类型：">
    <el-select v-model="formInline.leixing" placeholder="初诊" class="formwidth">
      <el-option label="复诊" value="fuzhen"></el-option>
      <el-option label="初诊" value="chuzhen"></el-option>
      <el-option label="急诊" value="jizhen"></el-option>
    </el-select>
  </el-form-item>
  <!-- 查询按钮 -->
    <!-- <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item> -->
</el-form>
<!-- 表单 -->
<el-form :label-position="labelPosition" label-width="100px" :rules="rules" ref="formLabelAlign" :model="formLabelAlign">
  <el-form-item label="临床诊断：" prop="zhenduan">
    <el-input v-model="formLabelAlign.zhenduan" class="fromheigth"></el-input>
  </el-form-item>
  <el-form-item label="大体检查：" prop="jiancha">
    <el-input v-model="formLabelAlign.jiancha" class="fromheigth"></el-input>
  </el-form-item>
  <el-form-item label="病理检查：" prop="bingli">
    <el-input v-model="formLabelAlign.bingli" class="fromheigth"></el-input>
  </el-form-item>
  <el-form-item label="免疫/组化：" prop="mianyi">
    <el-input v-model="formLabelAlign.mianyi"  class="fromheigth"></el-input>
  </el-form-item>
  <el-form-item label="结果：" prop="jieguo">
    <el-input v-model="formLabelAlign.jieguo" class="fromheigth"></el-input>
  </el-form-item>
  <el-form-item label="备注：" prop="beizhu">
    <el-input v-model="formLabelAlign.beizhu" class="fromheigth"></el-input>
  </el-form-item>
  <el-form-item label="上传附件：" prop="">
      <el-upload
  class=""
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <div class="el-upload__text Scstyle">最多上传三个附件，每个附件大小不超过3M</div>
</el-upload>
  </el-form-item>
  <el-form-item label="文件描述：" prop="">
    <el-row :gutter="1">
      <el-col :span="6"><div class="grid-content bg-purple"><el-input v-model="formLabelAlign.miaoshu" class=""></el-input></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"><el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :auto-upload="false">

  <el-button slot="trigger" size="small" type="primary" class="btncolor">浏览</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" class="btncolotwo" @click="submitUpload">上传到服务器</el-button>
</el-upload></div></el-col>
</el-row>
  </el-form-item>
 <el-form-item>
    <el-button type="primary" @click="submitForm('formLabelAlign')" class="btncolotwo">立即保存</el-button>
    <el-button @click="resetForm('formLabelAlign')" class="btncolor">取消</el-button>
  </el-form-item>
</el-form>

  </div>
</template>

<script>
export default {
data() {
  return {
    //上传文件地址
    fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
    labelPosition: 'right',
        formLabelAlign: {
          nazhenduanme: '',
          jianhca: '',
          bingli: '',
          mianyi: '',
          jieguo: '',
          miaoshu:"",
          beizhu: ''
        },
     formInline: {
          name: '',
          sex: '',
          age: '',
          kebie: '',
          leixing: ''
        },
          rules: {
          zhenduan: [{ required: true, message: '请填写临床诊断', trigger: 'blur' }],
          jiancha: [{ required: true, message: '请填写大体检查', trigger: 'blur' }],
          bingli: [{ required: true, message: '请填写病理检查', trigger: 'blur' }],
          mianyi: [{ required: true, message: '请填写免疫/组化', trigger: 'blur' }],
          jieguo: [{ required: true, message: '请填写结果', trigger: 'blur' }],
          beizhu: [{ required: true, message: '请填写备注', trigger: 'blur' }]
        }
  }
},
   mounted() {
   this.localrow=sessionStorage.getItem("row");
   var obj=JSON.parse(this.localrow)

      this.sr=obj
  
  },
methods: {
  //  onSubmit() {
  //       console.log('submit!');
  //     }
  //上传文件事件
    submitUpload() {
        this.$refs.upload.submit();
      },
    //保存事件
  submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //取消事件
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    

},
}
</script>

<style lang="scss" scoped>
.formwidth{
  width: 120px !important;
}
.formwidthtwo{
  width: 65px !important;
}
.fromheigth /deep/ input{
  height: 70px !important;
}
.Scstyle{
  color: #16dcb8;
}
.btncolor{
  background: #999999;
  border: none;
}
.btncolotwo{
   background: #16dcb8;
  border: none;
}
</style>